<template>
  <div class="l-rblock l-form-viewer" style="padding: 8px">
    <el-form :model="formData" :rules="rules" size="mini" ref="form" label-width="60px">
      <div class="l-auto-window">
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane class="l-tabs-container" :label="$t('基础信息')" name="tab0">
            <el-row :gutter="0">
              <div class="l-rblock">
                <el-col :span="12" v-if="lr_hasPageAuth('f_Account')">
                  <el-form-item label="账号" prop="f_Account">
                    <el-input v-model="formData.f_Account" :readonly="readonlyAccount"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="lr_hasPageAuth('f_RealName')">
                  <el-form-item label="姓名" prop="f_RealName">
                    <el-input v-model="formData.f_RealName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="lr_hasPageAuth('f_CompanyId')">
                  <el-form-item label="公司" prop="f_CompanyId">
                    <l-tree-select
                      v-model="formData.f_CompanyId"
                      :placeholder="$t('请选择公司')"
                      :options="lr_companyTree"
                      @change="handleChangeCompany"
                    >
                    </l-tree-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="lr_hasPageAuth('f_DepartmentId')">
                  <el-form-item label="部门" prop="f_DepartmentId">
                    <l-tree-select
                      v-model="formData.f_DepartmentId"
                      :placeholder="$t('请选择部门')"
                      :options="lr_departmentTree(lr_departments[formData.f_CompanyId] || [])"
                    >
                    </l-tree-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="lr_hasPageAuth('f_Password')">
                  <el-form-item label="密码" prop="f_Password">
                    <el-input v-model="formData.f_Password" :type="passwordType" :readonly="readonlyPassword">
                      <i class="el-icon-view el-input__icon" slot="suffix" @click="showPassword"></i>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="lr_hasPageAuth('f_Gender')">
                  <el-form-item label="性别" prop="f_Gender">
                    <l-radio v-model="formData.f_Gender" :options="optionsGender"></l-radio>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="lr_hasPageAuth('f_Birthday')">
                  <el-form-item label="生日" prop="f_Birthday">
                    <l-date v-model="formData.f_Birthday" dateType="date"></l-date>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="lr_hasPageAuth('f_Email')">
                  <el-form-item label="邮箱" prop="f_Email">
                    <el-input v-model="formData.f_Email"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="lr_hasPageAuth('f_Mobile')">
                  <el-form-item label="手机" prop="f_Mobile">
                    <el-input v-model="formData.f_Mobile"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="lr_hasPageAuth('f_Telephone')">
                  <el-form-item label="电话" prop="f_Telephone">
                    <el-input v-model="formData.f_Telephone"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="lr_hasPageAuth('f_OICQ')">
                  <el-form-item label="QQ" prop="f_OICQ">
                    <el-input v-model="formData.f_OICQ"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="lr_hasPageAuth('f_WeChat')">
                  <el-form-item label="微信" prop="f_WeChat">
                    <el-input v-model="formData.f_WeChat"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="lr_hasPageAuth('f_EnabledMark')">
                  <el-form-item label="状态" prop="f_EnabledMark">
                    <el-switch :active-value="1" :inactive-value="0" v-model="formData.f_EnabledMark"> </el-switch>
                  </el-form-item>
                </el-col>
                <el-col :span="24" v-if="lr_hasPageAuth('f_Description')">
                  <el-form-item label="描述" prop="f_Description">
                    <el-input type="textarea" v-model="formData.f_Description"></el-input>
                  </el-form-item>
                </el-col>
              </div>
            </el-row>
          </el-tab-pane>
          <el-tab-pane class="l-tabs-container" :label="$t('角色信息')" name="tab1">
            <el-row :gutter="0">
              <div class="l-rblock">
                <l-edit-table
                  addBtnText="添加角色"
                  :dataSource="formRoles"
                  @addRow="handleAddRole"
                  @deleteRow="handleDeleteRole"
                >
                  <el-table-column v-slot="scope" label="编号" width="110">
                    {{ getRoleCode(scope.row.f_ObjectId) }}
                  </el-table-column>
                  <el-table-column v-slot="scope" prop="f_ObjectId" label="名称" minWidth="100">
                    {{ getRoleName(scope.row.f_ObjectId) }}
                  </el-table-column>
                </l-edit-table>
              </div>
            </el-row>
          </el-tab-pane>
          <el-tab-pane class="l-tabs-container" :label="$t('岗位信息')" name="tab2">
            <el-row :gutter="0">
              <div class="l-rblock">
                <l-edit-table
                  addBtnText="添加岗位"
                  :dataSource="formPosts"
                  @addRow="handleAddPost"
                  @deleteRow="handleDeletePost"
                >
                  <el-table-column v-slot="scope" label="编号" width="110">
                    {{ getPostCode(scope.row.f_ObjectId) }}
                  </el-table-column>
                  <el-table-column v-slot="scope" prop="f_ObjectId" label="名称" minWidth="100">
                    {{ getPostName(scope.row.f_ObjectId) }}
                  </el-table-column>
                </l-edit-table>
              </div>
            </el-row>
          </el-tab-pane>
          <el-tab-pane class="l-tabs-container" :label="$t('负责部门')" name="tab3">
            <el-row :gutter="0">
              <div class="l-rblock">
                <l-edit-table
                  addBtnText="添加部门"
                  :dataSource="formDepartments"
                  @addRow="handleAddDepartment"
                  @deleteRow="handleDeleteDepartment"
                >
                  <el-table-column v-slot="scope" label="编号" width="110">
                    {{ getDepartmentCode(scope.row.f_ObjectId) }}
                  </el-table-column>
                  <el-table-column v-slot="scope" prop="f_ObjectId" label="名称" minWidth="100">
                    {{ getDepartmentName(scope.row.f_ObjectId) }}
                  </el-table-column>
                </l-edit-table>
              </div>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-form>

    <l-dialog
      :title="$t('添加角色')"
      :visible.sync="selectRoleVisible"
      :height="480"
      width="800px"
      @ok="handleRoleSelectOk"
      @closed="handleRoleSelectClosed"
    >
      <l-role-select-panel ref="roleSelectPanel"></l-role-select-panel>
    </l-dialog>

    <l-dialog
      :title="$t('添加岗位')"
      :visible.sync="selectPostVisible"
      :height="480"
      width="1024px"
      @ok="handlePostSelectOk"
      @closed="handlePostSelectClosed"
    >
      <l-post-select-panel ref="postSelectPanel"></l-post-select-panel>
    </l-dialog>

    <l-dialog
      :title="$t('添加部门')"
      :visible.sync="selectDepartmentVisible"
      :height="480"
      width="800px"
      @ok="handleDepartmentSelectOk"
      @closed="handleDepartmentSelectClosed"
    >
      <l-department-select-panel ref="departmentSelectPanel"></l-department-select-panel>
    </l-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: "tab0",

      passwordType: "password",

      readonlyAccount: false,
      readonlyPassword: false,
      departmentLoad: false,
      optionsGender: [
        { label: "男", value: 1 },
        { label: "女", value: 0 },
      ],
      formData: {
        f_Account: "",
        f_Password: "",
        f_RealName: "",
        f_HeadIcon: "",
        f_Gender: 1,
        f_Birthday: null,
        f_Mobile: "",
        f_Telephone: "",
        f_Email: "",
        f_OICQ: "",
        f_WeChat: "",
        f_CompanyId: "",
        f_DepartmentId: "",
        f_EnabledMark: 1,
        f_Description: "",
      },
      rules: {
        f_Account: [
          { required: true, message: "请输入账号" },
          {
            validator: this.lr_existDbFiled,
            keyValue: () => {
              return this.formData.f_UserId;
            },
            tableName: "lr_base_user",
            keyName: "f_UserId",
            trigger: "null",
          },
        ],
        f_RealName: [{ required: true, message: "请输入姓名" }],
        f_CompanyId: [{ required: true, message: "请输入公司", trigger: "blur" }],
        f_DepartmentId: [{ required: true, message: "请输入部门", trigger: "blur" }],
        f_Password: [{ required: true, message: "请输入密码" }],
      },

      formRoles: [],
      selectRoleVisible: false,

      formPosts: [],
      selectPostVisible: false,

      formDepartments: [],
      selectDepartmentVisible: false,
    };
  },
  created() {},
  methods: {
    handleChangeCompany() {
      this.formData.f_DepartmentId = "";
    },
    resetForm() {
      this.passwordType = "password";
      this.readonlyPassword = false;
      this.readonlyAccount = false;
      this.formData.f_UserId = "";
      this.activeName = "tab0";
      this.formRoles = [];
      this.formPosts = [];
      this.formDepartments = [];

      this.$refs.form && this.$refs.form.resetFields();
    },
    // 校验表单
    validateForm() {
      return this.$formValidateWraper(this.$refs.form);
    },
    setForm(data) {
      data = this.$deepClone(data);
      this.readonlyPassword = true;
      this.readonlyAccount = true;
      this.formData = data.user;
      this.formData.f_Password = "xxxxxx";

      this.formRoles = data.roles;
      this.formPosts = data.posts;
      this.formDepartments = data.departments;
    },
    getForm() {
      const postData = {
        user: this.$deepClone(this.formData),
      };
      postData.roles = this.$deepClone(this.formRoles);
      postData.posts = this.$deepClone(this.formPosts);
      postData.departments = this.$deepClone(this.formDepartments);

      return postData;
    },

    handleAddRole() {
      this.selectRoleVisible = true;
    },
    handleRoleSelectClosed() {
      this.$refs.roleSelectPanel.resetForm();
    },
    handleRoleSelectOk() {
      const selectData = this.$refs.roleSelectPanel.getForm().map((t) => {
        return { f_Category: 1, f_ObjectId: t.f_RoleId };
      });
      const addData = selectData.filter((t) => this.formRoles.findIndex((t2) => t2.f_ObjectId == t.f_ObjectId) == -1);
      this.formRoles.push(...addData);
      this.selectRoleVisible = false;
    },
    handleDeleteRole(data) {
      this.formRoles.splice(data.index, 1);
    },

    handleAddPost() {
      this.selectPostVisible = true;
    },
    handlePostSelectClosed() {
      this.$refs.postSelectPanel.resetForm();
    },
    handlePostSelectOk() {
      const selectData = this.$refs.postSelectPanel.getForm().map((t) => {
        return { f_Category: 2, f_ObjectId: t.f_PostId };
      });
      const addData = selectData.filter((t) => this.formPosts.findIndex((t2) => t2.f_ObjectId == t.f_ObjectId) == -1);
      this.formPosts.push(...addData);
      this.selectPostVisible = false;
    },
    handleDeletePost(data) {
      this.formPosts.splice(data.index, 1);
    },

    handleAddDepartment() {
      this.selectDepartmentVisible = true;
    },
    handleDepartmentSelectClosed() {
      this.$refs.departmentSelectPanel.resetForm();
    },
    handleDepartmentSelectOk() {
      const selectData = this.$refs.departmentSelectPanel.getForm().map((t) => {
        return { f_Category: 3, f_ObjectId: t.f_DepartmentId };
      });
      const addData = selectData.filter(
        (t) => this.formDepartments.findIndex((t2) => t2.f_ObjectId == t.f_ObjectId) == -1
      );
      this.formDepartments.push(...addData);
      this.selectDepartmentVisible = false;
    },
    handleDeleteDepartment(data) {
      this.formDepartments.splice(data.index, 1);
    },
    getDepartmentName(value) {
      return this.lr_departmentNameByOne(value);
    },
    getDepartmentCode(value) {
      return this.lr_departmentNameByOne(value, "f_EnCode");
    },

    getRoleName(value) {
      this.lr_loadRole(value);
      return (this.lr_role[value] || {}).f_FullName || "";
    },
    getRoleCode(value) {
      this.lr_loadRole(value);
      return (this.lr_role[value] || {}).f_EnCode || "";
    },
    getPostName(value) {
      this.lr_loadPost(value);
      //console.log(this.lr_post[value])
      return (this.lr_post[value] || {}).f_Name || "";
    },
    getPostCode(value) {
      this.lr_loadPost(value);
      return (this.lr_post[value] || {}).f_EnCode || "";
    },

    showPassword() {
      if (this.readonlyPassword) {
        return;
      }
      this.passwordType == "" ? (this.passwordType = "password") : (this.passwordType = "");
    },
  },
};
</script>
